<script setup lang="ts">
import EMERGENCY_PERSON_ICON from '/@/assets/image/icon/emergency-person-icon.png';
import EMERGENCY_PERSON_PHONE from '/@/assets/image/icon/emergency-person-phone.png';
import { makePhoneCall, showToast } from '@tarojs/taro';
const props = withDefaults(defineProps<{ list?: EmergencyDrillApi.MemberDto[] }>(), {
  list: () => [],
});

function callPhone(phone?: string) {
  if (!phone) {
    showToast({ title: '电话号码不存在', icon: 'error' });
    return;
  }
  makePhoneCall({
    phoneNumber: phone,
  });
}
</script>
<template>
  <view class="emergency-person-list">
    <view class="emergency-person-item" v-for="item in props.list" :key="item.id" >
      <view class="emergency-person-item--left">
        <nut-avatar shape="round">
          <image :src="EMERGENCY_PERSON_ICON" />
        </nut-avatar>
        <view class="emergency-person-item__person">
          <view class="emergency-person-item__person--name"> {{ item.memberUserName }} </view>
          <view> {{ item.emergencyGroupName }} </view>
        </view>
      </view>
      <view>
        <nut-avatar
          size="small"
          shape="square"
          bg-color="#fff"
          @click="callPhone(item.memberUserPhone)"
        >
          <image :src="EMERGENCY_PERSON_PHONE" />
        </nut-avatar>
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.emergency-person-list {
  padding: 0 20px;
  .emergency-person-item {
    margin-top: 20px;
    height: 100px;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    padding: 20px;
    font-size: 20px;
    color: #999;
    &__person {
      display: inline-block;
      margin-left: 20px;
      &--name {
        font-size: 30px;
        color: #333;
      }
    }

    &--left {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}
</style>
